<!--
 * @Author: zhang ke
 * @Date: 2025-07-05 10:12:55
 * @LastEditors: your name
 * @LastEditTime: 2025-07-05 16:57:48
 * @Description: 大屏折线图
 * @FilePath: \vue3-admin\src\views\screen\components\Line.vue
-->
<template>
    <div class="wrapper">
        <div class="box">
            <div class="title-wrapper">
                <div class="title">未来30天游客量趋势图</div>
                <img class="title-icon" src="../images/dataScreen-title.png" />
            </div>
            <div class="echarts" ref="lineRef"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';
let lineRef = ref()
onMounted(() => {
    LineEcharts()
})

const LineEcharts = () => {
    const chart = echarts.init(lineRef.value)
    const option = {
        //标题组件
        title: {
            text: '(访问量)',
            top: '10%',
            left: '2%',
            textStyle: {
                fontSize: 12,
                color: '#7cc2e9',
            }
        },
        //鼠标悬浮的样式
        tooltip: {
            trigger: 'axis',
            backgroundColor: '#225284',
            borderWidth:0,
            textStyle:{
                color:'#ffffff'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '16%',
            top: '19%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                //两侧不留白
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                //分割线不要
                splitLine: {
                    show: false
                },
                // 轴线的设置
                axisLine: {
                    show: true
                },
                //刻度
                axisTick: {
                    show: true,
                },
                //设置x轴线文字颜色
                axisLabel: {
                    color: '#7cc2e9'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                //两侧不留白
                boundaryGap: false,
                //分割线不要
                splitLine: {
                    show: false
                },
                // 轴线的设置
                axisLine: {
                    show: true
                },
                //刻度
                axisTick: {
                    show: true,
                },
                //设置y轴线上的颜色
                axisLabel: {
                    color: '#7cc2e9'
                }
            }
        ],
        series: [
            {
                name: '游客量',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 0,

                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#765f3b'
                        },
                        {
                            offset: 1,
                            color: '#11144e'
                        }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: [140, 232, 101, 264, 90, 340, 250]
            },
        ]
    };
    chart.setOption(option)
}
</script>

<style scoped lang="scss">
.wrapper {
    width: 100%;
    height: 280px;
    padding: 0 20px;

    .box {
        width: 100%;
        height: 100%;
        background: url('../images/dataScreen-main-cb.png') no-repeat;
        background-size: cover;
        .title-wrapper {
                padding-left: 10px;
        
                .title {
                    color: white;
                    font-size: 20px;
                    margin-bottom: 2px;
                }
        
                .title-icon {
                    width: 50px;
                }
            }

        .echarts {
            width: 100%;
            height: 280px;
        }
    }

}
</style>
